<!-- Sample HTML for jQuery Grid/Dialog Framework -->
<!-- MVC3 razor view but you can replace with your server-side code as you see fit -->

<!--  This is the Parent Entity ID -->
@Html.HiddenFor(model => model.MyParentEntity.ID)

<!-- Child Entity Grid -->
<!-- Displays detail grid for master parent item above -->
<div class="toolbar">
  <a href="#" id="btnAddExample" class="submit button large ui-corner-all">Add Example</a>
</div>
<table id="gridExample" cellpadding="0" cellspacing="0" border="0" class="display"
    style="font-size: x-small">
    <thead>
        <tr>
            <th>
            </th>
            <th>
                Column A
            </th>
            <th>
                Column B
            </th>
        </tr>
    </thead>
    @foreach (var item in Model.Examples)
    {
        <tr id = "Example@(item.ID)">
            <td>
                @Html.ActionLink(linkText: "Edit",
                  actionName: "EditExample",
                  controllerName: "Order",
                  routeValues: new RouteValueDictionary { { "id", item.ID } },
                  htmlAttributes: new Dictionary<string, object>() { { "rel", item.ID.ToString() }, { "class", "editExample" } })
            </td>
            <td>
                @item.columnA.Name
            </td>
            <td>
                @item.columnB
            </td>
        </tr>
    }
</table>

<!-- AJAX Dialogs -->
<!-- New Example -->
<!-- Will be displayed when user clicks edit/add -->
<div id="dlgNewExample" style="display: none; height: 480px; width: 360px">
    <div class="dlg-container">
        <h2 style="color: #5399C4">
            Example</h2>
        <p>Column A</p>
        @Html.DropDownList("selectColumnA", new SelectList(Model.ColumnA, "Key", "Value"))
        <p>Column B</p>
        <input type="text" id="txtColumnB" />
        <div class="clear">
        </div>
        <div class="toolbar">
            <input type="button" id="btnSaveExample" value="Save" class="submit button large ui-corner-all" />
            <input type="button" id="btnCancelExample" value="Cancel" class="submit button large ui-corner-all" />
        </div>
    </div>
</div>

<script src="/js/appcode/oop.js" type="text/javascript"></script>
<script src="/js/appcode/GridView.js" type="text/javascript"></script>
<script src="/js/appcode/DialogView.js" type="text/javascript"></script>

<script type="text/javascript">

    var _ExampleGridView = null;
    var _ExampleController = null;
    var _ExampleDialogView = null;
    var _ExampleView = null;
    
     $(document).ready(function () {
     
        _ExampleView = new EntityView();
        _ExampleDialogView = new DialogView();
        _ExampleGridView = new GridView();

        _ExampleController = new ExampleController();
        _ExampleController.initialize(_ExampleDialogView, _ExampleGridView, $('#MyParentEntity_ID').val(), 'editExample', 'Example');

        _ExampleGridView.initialize(_ExampleController, '#gridExample', '.editExample', '#Example');
        _ExampleDialogView.initialize(_ExampleController, '#dlgNewExample', '#btnSaveExample', '#btnCancelExample');
        _ExampleView.initialize(_ExampleController, '#btnAddExample');
        
     });